<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form mt-10" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业班组" clearable>
                        <auto-search-resource searchType="JOB_ZY" searchName="resourceName"
                                              :name="condition['search_LIKE_workTeamName']"
                                              @selectName="v=>condition['search_LIKE_workTeamName']=v"></auto-search-resource>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期起">
                        <el-date-picker v-model="condition['search_GTE_jobTime']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期止">
                        <el-date-picker v-model="condition['search_LTE_jobTime']"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" class="ml-100" @click="loadData">查 询</el-button>
                <el-button @click="handleDetail(false)">计件明细</el-button>
            </el-row>
        </el-form>
        <div style="display: flex">
           <div class="boders">
            <div id="pie" class="balance-classCount-style"></div>
          </div>
            <div class="tabls">
                <el-row type="flex" justify="space-between" class="mt-10 ">
                    <el-col :span="4">
                        <el-button @click="handleExportT">导出Excel</el-button>
                    </el-col>
                    <el-col :span="20" style="display: flex;justify-content: space-between">
                        <title-point color="#50B155">
                            <div slot="content">
                                自然箱数 :
                                <span style="font-size: 16px">{{ tContainer }}</span>
                            </div>
                        </title-point>
                        <title-point color="#449DFF">
                            <div slot="content">
                                作业标箱量 :
                                <span style="font-size: 16px">{{ tTeu }}</span></div>
                        </title-point>
                        <title-point color="#30C8CA">
                            <div slot="content">
                                汇总工时 :
                                <span style="font-size: 16px">{{ tPiece }}</span></div>
                        </title-point>
                    </el-col>
                </el-row>
                <el-table :data="team" border stripe max-height="200" class="mt-10" style="height:204px">
                    <el-table-column prop="date" label="作业日期"  min-width="120"></el-table-column>
                    <el-table-column prop="workTeam" label="作业班组"  min-width="120"></el-table-column>
                    <el-table-column prop="containerNum" label="自然箱"  min-width="100"></el-table-column>
                    <el-table-column prop="teu" label="作业标箱量"  min-width="120"></el-table-column>
                    <el-table-column prop="piece" label="计件工时"  min-width="110"></el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <el-row type="flex" justify="space-between" class="mt-10 ">
                <el-col :span="8">
                    <el-button @click="handleExportP">导出Excel</el-button>
                </el-col>
                <el-col :span="16" style="display: flex;justify-content: space-between">
                    <title-point color="#50B155">
                        <div slot="content">
                            自然箱数 :
                            <span style="font-size: 16px">{{ pContainer }}</span>
                        </div>
                    </title-point>
                    <title-point color="#449DFF">
                        <div slot="content">
                            作业标箱量 :
                            <span style="font-size: 16px">{{ pTeu }}</span></div>
                    </title-point>
                    <title-point color="#30C8CA">
                        <div slot="content">
                            汇总工时 :
                            <span style="font-size: 16px">{{ pPiece }}</span></div>
                    </title-point>
                </el-col>
            </el-row>
            <el-table :data="person" border stripe max-height="500" class="mt-10">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="workTeam" label="作业班组"  min-width="120"></el-table-column>
                <el-table-column prop="userName" label="登录账号"  min-width="120"></el-table-column>
                <el-table-column prop="personName" label="作业人员"  min-width="120"></el-table-column>
                <el-table-column prop="containerNum" label="自然箱"  min-width="100"></el-table-column>
                <el-table-column prop="teu" label="作业标箱量"  min-width="120"></el-table-column>
                <el-table-column prop="piece" label="计件工时"  min-width="110"></el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleDetail(true,scope.row)">作业明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script> 
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import { getLocalTime } from "@/utils/dateFormat";
    import { wzWorkTeam, wzWorkTeamUserName } from "@/api/balance/balance";
    import titlePoint from '../common/title-point'
    import { newExportExcel } from "@/utils/newExport";

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/pie");
    export default {
        name: "作业班组",
        components: {
            autoSearchResource, titlePoint
        },
        data() {
            return {
                condition: {
                    search_LIKE_workTeamName: '',
                    search_GTE_jobTime: '',
                    search_LTE_jobTime: '',
                },
                created: true,
                pie: '',
                team: [],
                person: [],
                tContainer: 0,
                tTeu: 0,
                tPiece: 0,
                pContainer: 0,
                pTeu: 0,
                pPiece: 0,
            }
        },
        mounted() {
            const date = JSON.parse(sessionStorage.getItem('classCountIndexWz'))
            if (date && date.date) {
                this.condition['search_GTE_jobTime'] = date.date
                this.condition['search_LTE_jobTime'] = date.date
            } else {
                this.condition['search_GTE_jobTime'] = getLocalTime(new Date().getTime(), 'YYYY-MM-DD')
                this.condition['search_LTE_jobTime'] = getLocalTime(new Date().getTime(), 'YYYY-MM-DD')
            }
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                this.created = false
                const params = this.$assist.copySearchConditions(this.condition)
                wzWorkTeam(params).then(res => {
                    this.team = res.data.aaData
                    let data = res.data.aaData
                    let name = []
                    let pieValue = []
                    let pieValueEnd = []
                    let tContainer = 0, tTeu = 0, tPiece = 0
                    for (let i = 0; i < data.length; i++) {
                        const el = data[i]
                        tContainer = tContainer + el.containerNum
                        tTeu = tTeu + el.teu
                        tPiece = tPiece + el.piece
                        name.push(el.workTeam)
                        pieValue.push({ value: el.piece, name: el.workTeam })
                    }
                    pieValue.forEach(el=>{
                        const result = pieValueEnd.findIndex(ol=>{return el.name === ol.name}) 
                        if(result !== -1){
                            pieValueEnd[result].value = pieValueEnd[result].value + el.value
                        }else{
                            pieValueEnd.push(el)
                        }
                    })
                    pieValueEnd.forEach(el=>{
                        el.value = el.value.toFixed(2)
                    })
                    this.tContainer = tContainer
                    this.tTeu = tTeu
                    this.tPiece = tPiece.toFixed(2)
                    this.pie = echarts.init(
                        document.getElementById("pie"),
                        "macarons"
                    );
                    this.pie.setOption({
                        title: {
                            text: '班组计件占比',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: name,
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: pieValueEnd,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                    wzWorkTeamUserName(params).then(text => {
                        this.person = text.data.aaData
                        let pContainer = 0, pTeu = 0, pPiece = 0
                        // debugger;
                        for (let i = 0; i < text.data.aaData.length; i++) {
                            const el = text.data.aaData[i]
                            pContainer = pContainer + el.containerNum
                            pTeu = pTeu + el.teu
                            pPiece = pPiece + el.piece
                        }
                        this.pContainer = pContainer
                        this.pTeu = pTeu
                        this.pPiece = pPiece.toFixed(2)
                    })
                })
            },
            handleDetail(item, row) {
                let classDetail = this.condition
                if (item) {
                    classDetail.search_LIKE_userName = row.userName
                    classDetail.search_LIKE_workTeamName = row.workTeam
                }
                sessionStorage.setItem('classDetailWz', JSON.stringify(classDetail))
                this.handleRouterPush({ path: '/work/teamDetail', name: '作业明细' })
            },
            handleRouterPush(val) {
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
            handleExportT() {
                let map = new Map();
                map.set('date', '作业日期')
                map.set('workTeam', '作业班组')
                map.set('containerNum', '自然箱')
                map.set('teu', '作业标箱量')
                map.set('piece', '计件工时')
                let params = this.$assist.copySearchConditions(this.condition)
                wzWorkTeam(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业班组统计", exportRecords);
                })
            },
            handleExportP() {
                let map = new Map();
                map.set('workTeam', '作业班组')
                map.set('userName', '登录账号')
                map.set('personName', '作业人员')
                map.set('containerNum', '自然箱')
                map.set('teu', '作业标箱量')
                map.set('piece', '计件工时')
                let params = this.$assist.copySearchConditions(this.condition)
                wzWorkTeamUserName(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业人员统计", exportRecords);
                })
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000;
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
    }
</script>

<style scoped>
    #pie {
        height: 300px;
    }

    .balance-classCount-style {
        height: 300px;
        width: 100%;
    }

   .boders{
       width: 100%;
       height: 300px;
        border: 1px solid #dddddd;
   }
   .tabls{
       width: 100%;
       height: 300px;
       border: 1px solid #dddddd;
   }
</style>
